---
import Layout from '../../../layouts/Layout.astro';
import Breadcrumb from '../../../components/Breadcrumb.astro';
import { getBrandBySlugFromDB, getModelsByBrand, getColorsByModel, getModelContent, getProductIdsOffersLastUpdated } from '../../../lib/products';
import { getBlogPostsForModel } from '../../../lib/blog';
import UspStrip from '../../../components/UspStrip.astro';
import QuickFacts from '../../../components/QuickFacts.astro';

const { slug, model: modelSlug } = Astro.params;
const dbBrand = await getBrandBySlugFromDB(slug!);
if (!dbBrand) return Astro.redirect('/merken');

const brandName = dbBrand.name;

// Find model name from slug
const models = await getModelsByBrand(slug!);
const modelInfo = models.find(m => m.slug === modelSlug);
if (!modelInfo) return Astro.redirect(`/merken/${slug}`);

const modelName = modelInfo.name;

// Get all color variants, SEO content, and related blog posts for this model
const [colors, modelContent, relatedPosts] = await Promise.all([
  getColorsByModel(slug!, modelName),
  getModelContent(slug!, modelSlug!),
  getBlogPostsForModel(brandName, modelName),
]);

// If only 1 color, redirect straight to the color page
if (colors.length === 1) {
  return Astro.redirect(`/merken/${slug}/${modelSlug}/${colors[0].slug}`, 302);
}

const lowestPrice = colors.length > 0 ? Math.min(...colors.map(c => c.lowestPrice)) : 0;
const highestPrice = colors.length > 0 ? Math.max(...colors.map(c => c.lowestPrice)) : 0;
const totalProducts = colors.reduce((sum, c) => sum + c.count, 0);
const priceRange = lowestPrice === highestPrice
  ? `€${lowestPrice.toFixed(2).replace('.', ',')}`
  : `€${lowestPrice.toFixed(2).replace('.', ',')} - €${highestPrice.toFixed(2).replace('.', ',')}`;

// QuickFacts data
const modelProductIds = colors.map(c => c.productId).filter((id): id is number => typeof id === 'number');
const modelOffersLastUpdated = await getProductIdsOffersLastUpdated(modelProductIds);
const quickFactsUpdatedLabel = modelOffersLastUpdated
  ? new Date(modelOffersLastUpdated).toLocaleString('nl-NL', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })
  : new Date().toLocaleString('nl-NL', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' });
const lowestPriceStr = `€${lowestPrice.toFixed(2).replace('.', ',')}`;
const quickFactsSummary = lowestPrice > 0
  ? `Laagste prijs vandaag: ${lowestPriceStr} · ${colors.length} ${colors.length === 1 ? 'kleur' : 'kleuren'} · ${totalProducts} ${totalProducts === 1 ? 'variant' : 'varianten'} · Laatst bijgewerkt: ${quickFactsUpdatedLabel}.`
  : `${colors.length} ${colors.length === 1 ? 'kleur' : 'kleuren'} · ${totalProducts} ${totalProducts === 1 ? 'variant' : 'varianten'} · Laatst bijgewerkt: ${quickFactsUpdatedLabel}.`;
const quickFacts: { label: string; value: string }[] = [
  { label: 'Laagste prijs', value: priceRange },
  { label: 'Kleuren', value: String(colors.length) },
  { label: 'Varianten', value: String(totalProducts) },
  { label: 'Bijgewerkt', value: quickFactsUpdatedLabel },
];

const INITIAL_VISIBLE = 24;
const visibleColors = colors.slice(0, INITIAL_VISIBLE);
const hiddenColors = colors.slice(INITIAL_VISIBLE);

const title = `${brandName} ${modelName} kopen? Vergelijk ${colors.length} kleuren vanaf €${lowestPrice.toFixed(2).replace('.', ',')} | SneakerPicks`;
const description = `${brandName} ${modelName} in ${colors.length} kleuren vergelijken bij Nederlandse webshops. ${totalProducts} varianten beschikbaar vanaf ${priceRange}. Vind de laagste prijs.`;
const canonicalUrl = `https://sneakerpicks.nl/merken/${slug}/${modelSlug}`;

// JSON-LD structured data
const modelDateModifiedIso = (modelOffersLastUpdated ?? new Date()).toISOString();
const jsonLd = {
  "@context": "https://schema.org",
  "@type": "ItemList",
  "inLanguage": "nl-NL",
  "name": `${brandName} ${modelName}`,
  "description": description,
  "url": canonicalUrl,
  "numberOfItems": colors.length,
  "dateModified": modelDateModifiedIso,
  "publisher": {
    "@type": "Organization",
    "name": "SneakerPicks",
    "url": "https://sneakerpicks.nl",
    "logo": { "@type": "ImageObject", "url": "https://sneakerpicks.nl/logo.svg" }
  },
  "itemListElement": colors.map((c, i) => ({
    "@type": "ListItem",
    "position": i + 1,
    "item": {
      "@type": "Product",
      "inLanguage": "nl-NL",
      "name": `${brandName} ${modelName} ${c.name}`,
      "url": `https://sneakerpicks.nl/merken/${slug}/${modelSlug}/${c.slug}`,
      ...(c.image ? { "image": c.image } : {}),
      "brand": { "@type": "Brand", "name": brandName },
      "offers": {
        "@type": "AggregateOffer",
        "lowPrice": c.lowestPrice,
        "priceCurrency": "EUR",
        "availability": "https://schema.org/InStock"
      }
    }
  }))
};

const breadcrumbLd = {
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "inLanguage": "nl-NL",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://sneakerpicks.nl/" },
    { "@type": "ListItem", "position": 2, "name": "Merken", "item": "https://sneakerpicks.nl/merken" },
    { "@type": "ListItem", "position": 3, "name": brandName, "item": `https://sneakerpicks.nl/merken/${slug}` },
    { "@type": "ListItem", "position": 4, "name": modelName, "item": canonicalUrl }
  ]
};

const faqLd = modelContent?.faq?.length ? {
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "inLanguage": "nl-NL",
  "mainEntity": modelContent.faq.map(item => ({
    "@type": "Question",
    "name": item.question,
    "acceptedAnswer": {
      "@type": "Answer",
      "text": item.answer
    }
  }))
} : null;
---

<Layout title={title} description={description} canonical={canonicalUrl}>
  <script type="application/ld+json" set:html={JSON.stringify(jsonLd)} />
  <script type="application/ld+json" set:html={JSON.stringify(breadcrumbLd)} />
  {faqLd && <script type="application/ld+json" set:html={JSON.stringify(faqLd)} />}

  <!-- Hero / Header -->
  <section class="relative overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-b from-accent/5 via-transparent to-transparent"></div>
    <div class="relative mx-auto max-w-7xl px-4 py-16 sm:px-6">
      <Breadcrumb items={[
        { label: 'Home', href: '/' },
        { label: 'Merken', href: '/merken' },
        { label: brandName, href: `/merken/${slug}` },
        { label: modelName },
      ]} />
      <h1 class="text-4xl font-black tracking-tight sm:text-5xl">{brandName} {modelName}</h1>
      {modelContent?.intro ? (
        <p class="mt-3 max-w-3xl text-base leading-relaxed text-text-secondary">{modelContent.intro}</p>
      ) : (
        <p class="mt-2 text-text-secondary">
          {colors.length} {colors.length === 1 ? 'kleur' : 'kleuren'} · {totalProducts} {totalProducts === 1 ? 'variant' : 'varianten'} · {priceRange}
        </p>
      )}
      <div class="mt-3 flex flex-wrap items-center gap-3 text-sm text-text-muted">
        <span>{colors.length} {colors.length === 1 ? 'kleur' : 'kleuren'}</span>
        <span class="text-border">·</span>
        <span>{totalProducts} {totalProducts === 1 ? 'variant' : 'varianten'}</span>
        <span class="text-border">·</span>
        <span>Vanaf <strong class="text-accent">{priceRange}</strong></span>
      </div>
      <div class="mt-5 max-w-3xl">
        <QuickFacts
          summary={quickFactsSummary}
          facts={quickFacts}
          ariaLabel={`Snelle feiten over de ${brandName} ${modelName}`}
        />
      </div>
    </div>
  </section>

  <UspStrip class="pb-8" />

  <section class="mx-auto max-w-7xl px-4 pb-16 sm:px-6">
    <!-- Color grid heading -->
    <h2 class="mb-6 text-xl font-bold tracking-tight sm:text-2xl">{brandName} {modelName} kleuren vergelijken</h2>

    <!-- Visible color cards (first 24) -->
    <div class="grid grid-cols-2 gap-4 sm:gap-6 md:grid-cols-3 lg:grid-cols-4">
      {visibleColors.map((color, index) => (
        <a
          href={`/merken/${slug}/${modelSlug}/${color.slug}`}
          class="group overflow-hidden rounded-2xl border border-border/50 bg-bg-card transition-all hover:border-accent/30 hover:shadow-lg hover:shadow-accent/5"
        >
          <div class="aspect-square overflow-hidden bg-bg-elevated p-4">
            {color.productId ? (
              <img
                src={`/api/img/${color.productId}`}
                srcset={`/api/img/${color.productId}?w=300 300w, /api/img/${color.productId}?w=400 400w, /api/img/${color.productId} 600w`}
                sizes="(max-width: 640px) 45vw, (max-width: 768px) 30vw, 25vw"
                alt={`${brandName} ${modelName} ${color.name}`}
                class="h-full w-full object-contain transition-transform duration-300 group-hover:scale-105"
                width="600"
                height="600"
                loading={index < 8 ? "eager" : "lazy"}
                fetchpriority={index < 8 ? "high" : "low"}
                decoding="async"
              />
            ) : color.image ? (
              <img
                src={color.image}
                alt={`${brandName} ${modelName} ${color.name}`}
                class="h-full w-full object-contain transition-transform duration-300 group-hover:scale-105"
                width="600"
                height="600"
                loading={index < 8 ? "eager" : "lazy"}
                fetchpriority={index < 8 ? "high" : "low"}
                decoding="async"
              />
            ) : (
              <div class="flex h-full w-full items-center justify-center text-text-muted">
                <span class="text-sm">{color.name}</span>
              </div>
            )}
          </div>
          <div class="p-3 sm:p-4">
            <p class="font-bold text-text group-hover:text-accent transition-colors truncate">{color.name}</p>
            <div class="mt-1 flex items-baseline gap-2">
              <span class="text-sm font-bold text-accent">vanaf €{color.lowestPrice.toFixed(2).replace('.', ',')}</span>
            </div>
            <p class="mt-0.5 text-xs text-text-muted">
              {color.count} {color.count === 1 ? 'variant' : 'varianten'}
            </p>
          </div>
        </a>
      ))}
    </div>

    <!-- Hidden color cards (beyond first 24) - still in DOM for SEO crawling -->
    {hiddenColors.length > 0 && (
      <div id="extra-colors" class="mt-4 sm:mt-6" style="display:none;">
        <div class="grid grid-cols-2 gap-4 sm:gap-6 md:grid-cols-3 lg:grid-cols-4">
        {hiddenColors.map(color => (
          <a
            href={`/merken/${slug}/${modelSlug}/${color.slug}`}
            class="group overflow-hidden rounded-2xl border border-border/50 bg-bg-card transition-all hover:border-accent/30 hover:shadow-lg hover:shadow-accent/5"
          >
            <div class="aspect-square overflow-hidden bg-bg-elevated p-4">
              {color.productId ? (
                <img
                  src={`/api/img/${color.productId}`}
                  srcset={`/api/img/${color.productId}?w=300 300w, /api/img/${color.productId}?w=400 400w, /api/img/${color.productId} 600w`}
                  sizes="(max-width: 640px) 45vw, (max-width: 768px) 30vw, 25vw"
                  alt={`${brandName} ${modelName} ${color.name}`}
                  class="h-full w-full object-contain transition-transform duration-300 group-hover:scale-105"
                  width="600"
                  height="600"
                  loading="lazy"
                  fetchpriority="low"
                  decoding="async"
                />
              ) : color.image ? (
                <img
                  src={color.image}
                  alt={`${brandName} ${modelName} ${color.name}`}
                  class="h-full w-full object-contain transition-transform duration-300 group-hover:scale-105"
                  width="600"
                  height="600"
                  loading="lazy"
                  fetchpriority="low"
                  decoding="async"
                />
              ) : (
                <div class="flex h-full w-full items-center justify-center text-text-muted">
                  <span class="text-sm">{color.name}</span>
                </div>
              )}
            </div>
            <div class="p-3 sm:p-4">
              <p class="font-bold text-text group-hover:text-accent transition-colors truncate">{color.name}</p>
              <div class="mt-1 flex items-baseline gap-2">
                <span class="text-sm font-bold text-accent">vanaf €{color.lowestPrice.toFixed(2).replace('.', ',')}</span>
              </div>
              <p class="mt-0.5 text-xs text-text-muted">
                {color.count} {color.count === 1 ? 'variant' : 'varianten'}
              </p>
            </div>
          </a>
        ))}
        </div>
      </div>

      <div id="show-more-container" class="mt-8 text-center">
        <button
          id="show-more-btn"
          type="button"
          class="inline-flex items-center gap-2 rounded-full border border-accent/30 bg-accent/5 px-6 py-3 text-sm font-bold text-accent transition-all hover:bg-accent/10 hover:border-accent/50"
        >
          Toon alle {colors.length} kleuren
          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
          </svg>
        </button>
      </div>

      <script>
        const btn = document.getElementById('show-more-btn');
        const container = document.getElementById('show-more-container');
        const extra = document.getElementById('extra-colors');
        if (btn && container && extra) {
          btn.addEventListener('click', () => {
            extra.style.display = '';
            container.remove();
          });
        }
      </script>
    )}

    {colors.length === 0 && (
      <div class="py-20 text-center">
        <p class="text-lg text-text-muted">Geen kleuren gevonden voor {brandName} {modelName}.</p>
        <a href={`/merken/${slug}`} class="mt-4 inline-block text-accent hover:underline">
          Bekijk alle {brandName} sneakers &rarr;
        </a>
      </div>
    )}

    <!-- SEO Description Section: prefer manual description, fall back to AI pdp_body -->
    {(modelContent?.description || modelContent?.pdpBody) && (
      <div class="mt-12 border-t border-border/30 pt-12">
        <h2 class="text-xl font-bold tracking-tight sm:text-2xl">Over de {brandName} {modelName}</h2>
        <div class="mt-4 max-w-3xl space-y-4 text-base leading-relaxed text-text-secondary">
          {(modelContent.description || modelContent.pdpBody || '').split('\n\n').map(paragraph => (
            <p>{paragraph}</p>
          ))}
        </div>
      </div>
    )}

    <!-- FAQ Section -->
    {modelContent?.faq && modelContent.faq.length > 0 && (
      <div class="mt-12 border-t border-border/30 pt-12">
        <h2 class="text-xl font-bold tracking-tight sm:text-2xl">Veelgestelde vragen over de {brandName} {modelName}</h2>
        <div class="mt-6 space-y-4">
          {modelContent.faq.map((item, i) => (
            <details class="group rounded-xl border border-border/50 bg-bg-card" open={i === 0}>
              <summary class="flex cursor-pointer items-center justify-between p-4 font-semibold text-text transition-colors hover:text-accent sm:p-5">
                {item.question}
                <svg class="h-5 w-5 shrink-0 text-text-muted transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
                </svg>
              </summary>
              <div class="border-t border-border/30 px-4 pb-4 pt-3 text-sm leading-relaxed text-text-secondary sm:px-5 sm:pb-5">
                {item.answer}
              </div>
            </details>
          ))}
        </div>
      </div>
    )}

    <!-- Andere modellen van dit merk -->
    {models.filter(m => m.slug !== modelSlug).length > 0 && (
      <div class="mt-12 border-t border-border/30 pt-12">
        <div class="flex items-end justify-between mb-4">
          <h2 class="text-xl font-bold tracking-tight sm:text-2xl">Andere {brandName} modellen</h2>
          <a href={`/merken/${slug}`} class="text-sm font-bold text-accent hover:text-accent-dim transition-colors">
            Alle modellen →
          </a>
        </div>
        <div class="flex flex-wrap gap-2">
          {models.filter(m => m.slug !== modelSlug).slice(0, 12).map(m => (
            <a href={`/merken/${slug}/${m.slug}`}
               class="rounded-full border border-border/50 bg-bg-card px-4 py-2 text-sm font-semibold text-text-secondary hover:border-accent/40 hover:text-accent transition-colors">
              {m.name} <span class="text-text-muted ml-1">({m.count})</span>
            </a>
          ))}
        </div>
      </div>
    )}

    {relatedPosts.length > 0 && (
      <div class="mt-12 border-t border-border/30 pt-12">
        <h2 class="mb-4 text-xl font-bold tracking-tight sm:text-2xl">
          {brandName} {modelName} op ons blog
        </h2>
        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {relatedPosts.map(post => (
            <a href={`/blog/${post.slug}`} class="group rounded-xl border border-border/50 bg-bg-card p-4 transition-colors hover:border-accent/50">
              <span class="rounded-full bg-accent/10 px-2.5 py-0.5 text-xs font-semibold text-accent">{post.category}</span>
              <h3 class="mt-2 font-bold leading-snug group-hover:text-accent transition-colors">{post.title}</h3>
              {post.excerpt && <p class="mt-1 text-sm text-text-secondary line-clamp-2">{post.excerpt}</p>}
            </a>
          ))}
        </div>
      </div>
    )}
  </section>
</Layout>